<template>
  <div class="login">
    <nav-bar class="header">
      <div slot="left" @click="goBack" class="back-icon">
        <img src="~assets/img/common/back.svg" alt="">
      </div>
      <div slot="center">{{type === 'login'? '登录': '注册'}}</div>
    </nav-bar>
    <img class="logo" src="~assets/img/logo.png" alt="">
    <div v-if="type === 'login'" class="login-body login">
      <van-form @submit="onSubmit">
        <van-field 
          v-model="username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div class="verify">
          <Verify 
          ref="loginVerifyRef" 
          @error="error" 
          :showButton="false" 
          @success="success" 
          :width="'100%'" 
          :height="'40px'" 
          :fontSize="'16px'" 
          :type="1" 
          :codeLength="4"/>
        </div>
        <div>
          <div class="link-register" @click="toggle('register')">立即注册</div>
          <van-button round block type="info" color="#ff8198" native-type="submit">登录</van-button>
        </div>
      </van-form>
    </div>
    <div v-else class="login-body register">
      <van-form @submit="onSubmit">
        <van-field 
          v-model="username1"
          name="username1"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password1"
          type="password"
          name="password1"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
          v-model="surePassword"
          type="password"
          name="surePassword"
          label="确认密码"
          placeholder="确认密码"
          :rules="[{ required: true, message: '请填写确认密码' }]"
        />
        <div class="verify">
          <Verify 
            ref="loginVerifyRef" 
            @error="error" 
            :showButton="false" 
            @success="success" 
            :width="'100%'" 
            :height="'40px'" 
            :fontSize="'16px'" 
            :type="1" 
            :codeLength="4"/>
        </div>
        <div>
          <div class="link-login" @click="toggle('login')">已有登录账号</div>
          <van-button round block type="info" color="#ff5777" native-type="submit">注册</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>

import Vue from 'vue';
import { Form,Field,Button} from 'vant';
import Verify from 'vue2-verify'
import NavBar from 'components/common/navbar/NavBar';
import {login, register } from 'network/user'
Vue.use(Form);
Vue.use(Field);
Vue.use(Button);
export default {
  name:'login',
  data() {
    return{
      username: '',
      password: '',
      username1: '',
      password1: '',
      surePassword:'',
      type: 'login',
      verify: false,

      userInfo:''
    }
  },
  components:{
    NavBar,
    Verify,

  },
  methods: {
    dealTriVer() {
      // 执行验证码的验证，通过 this.verify 知道验证码是否填写正确
      this.$refs.loginVerifyRef.$refs.instance.checkCode()
    },
    goBack(){
      this.$router.push("/home");
    },
    toggle(value){
      this.verify = false
      this.type = value
    },
    async onSubmit(values){
      this.dealTriVer()
      if(!this.verify){
        this.$toast.show('验证码未填或填写错误!')
        return
      }
      if (this.type === 'login') {
        const { data, resultCode } = await login({
          "loginName": values.username,
          // 密码使用MD5加密
          "passwordMd5": this.$md5(values.password)
        })
        
        localStorage.setItem('token', data)
        // 这里有bug,不设置跳转,填写了密码会提示密码为空
        window.location.href = '/'
      } else {
        const { data } = await register({
          "loginName": values.username1,
          "password": values.password1
        })
        this.$toast.show('注册成功')
        this.type = 'login'
      }
      // if(this.type == 'login'){
      //   const userInfo = {
      //     loginName:values.username,
      //     pwd: values.password
      //   } 
        
      //   localStorage.setItem('userInfo',JSON.stringify(userInfo))
      //   this.$router.go(-1);
      // }else{
      //   const sureUser = {
      //     registerName:values.username1,
      //     registerPwd: values.password1
      //   }
      //   this.$toast.show('注册成功!')
      //   this.type = 'login'
      // }
    },
    success(obj) {
      this.verify = true
      // 回调之后，刷新验证码
      obj.refresh()
    },
    error(obj) {
      this.verify = false
      // 回调之后，刷新验证码
      obj.refresh()
    }
  },
}
</script>

<style >
 
  .login .logo{
    display: block;
    width:48px;
    height: auto;
    margin: 80px auto 20px;
  }
  .login-body{
    width: 80%;
    margin: 0 auto;
  }
  .verify{
    margin-top: 15px;
    margin-bottom: 10px;
  }
  .login-body /deep/ .verify-bar-area{
    width: 260px!important;
  }
  .login-body /deep/ .van-button{
    margin-top: 20px;
    font-size: 16px;
  }
 

  .cerify-code-panel {
    margin-top: 16px;
    display: flex;
    justify-content: center;
  }
  .verify-code {
    width: 40%!important;
    float: left!important;
  }
  .verify-code-area {
    float: left!important;
    width: 54%!important;
    margin-left: 14px!important;
  }
  .verify-change-area {
    line-height: 44px;
  }              
  .varify-input-code {
    width: 90px;
    height: 38px!important;
    border: 1px solid #e9e9e9;
    padding-left: 10px;
    font-size: 16px;
  }  
  .link-register,.link-login{
    font-size: 14px;
    color: #ff8198;
  }                 
</style>